<template>
  <div class="list">
    <my-header title="发现"></my-header>
    <main class="main">
      <section class="left">
       
          <dl>
           <dd>
              <p>金币商城</p>
              <p class="xz">0元好物在这里</p>
            </dd>
             <dt>
               <img src="https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?imageMogr/format/webp/"/>
             </dt>
          </dl>
       
       <dl>
            <dd>
              <p>有红包快抢</p>
              <p class="xz">礼包福利领不停</p>
            </dd>
            <dt>
               <img src="https://fuss10.elemecdn.com/f/85/2bb180f2052c33cfec3852ef2bfccjpeg.jpeg?imageMogr/format/webp/"/>
             </dt>
          </dl>
     
     
        <dl>
           <dd>
            
              <p>必吃爆料</p>
              <p class="xz"> 最夯外卖指南</p>
            </dd>
             <dt>
               <img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/"/>
             </dt>
          </dl>
          <dl>
           <dd>
              <p>推荐有奖</p>
              <p class="xz">5元现金那不停</p>
            </dd>
             <dt>
               <img src="https://fuss10.elemecdn.com/6/76/8d42eef97ff4c1c2b671085358541jpeg.jpeg?imageMogr/format/webp/"/>
             </dt>
          </dl>
          <dl>
           <dd>
              <p>周边优惠</p>
              <p class="xz">领取口碑好卷</p>
            </dd>
             <dt>
               <img src="https://fuss10.elemecdn.com/5/10/2351e989d4171479ba0d7b5c06053jpeg.jpeg?imageMogr/format/webp/"/>
             </dt>
          </dl>
          <dl>
           <dd>
              <p>百元红包</p>
              <p class="xz">兴业银行联名卡</p>
            </dd>
             <dt>
               <img src="https://fuss10.elemecdn.com/3/cc/a45d2b9d7d09bbc49b40d4e626093jpeg.jpeg?imageMogr/format/webp/"/>
             </dt>
          </dl>
     </section>
    </main>
    <figure>
      <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/"/>
    </figure>
    <main class="mainone">

    </main>
  </div>
</template>

<script>
import myHeader from '@/components/myHeader'
export default {
  components: {
    myHeader
  }
}
</script>

<style scoped lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.list{
  width: 100%;
  .main{
    .pxToRem(margin-top,80);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    .left{
     width: 100%;
     display: flex;
      flex-wrap:wrap;
      .pxToRem(margin-top,20);
      dl{
        width: 50%;
         display: flex;
         align-items: center;
         justify-content: space-around;
         border-bottom: 1px solid #ededed;
         border-right:1px solid #ededed;
         box-sizing: border-box;
         padding-top:15px; 
          padding-bottom:15px; 
         &:nth-child(2n){
           border-right: none;
         }
        dd{
          width:40%;
          flex-direction: column;
          .pxToRem(line-height, 40);
          p{
            .pxToRem(font-size,25);
            &:nth-child(1){
              color: rgb(255, 153, 0);
            }
          }
          .xz{
             .pxToRem(font-size,10);
             color: #999;
          }
         }
        dt{
          width: 20%;
          img{
            width: 100%;
          }
        }
      }
    }
    
  }
  figure{
   
    .pxToRem(margin-top,20);
    img{
      width: 100%;
    }
  }
}
</style>
